<template>
  <div>
    <!-- class 前面是类名，后面是变量 
    动态绑定类名
    对象
    {属性值：属性相对应的值}
    ：class数组语法 ：class=['类名1','类名2','类名3',]-->
    <p v-bind:class="{'active':isActive}">你说啥</p>
    <p v-bind:class="[isActive?'active1':'active']">干嘛呢</p>
    <!-- :class="直接写js代码 比如 3元表达式" -->
    <p v-bind:class="isActive? 'active':''" class="active1 active2">学啥呢</p>
     <!-- v-bind:class指令可以与普通函数的class特性共存 -->
  </div>
</template>

<script>
export default {
  name: 'VueliDemoApp',

  data() {
    return {
      isActive:"npm"
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.active{
  color: #7dc74f;
}
.active1{
  color: #61a0f2;
}

</style>